<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="applicable-device" content="mobile" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>线路满载率统计</title>
    <script type="text/javascript">
 		document.write("<link rel='stylesheet' type='text/css' href='static/css/operate.css?random="+Math.random()+"'/>");
	</script>
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/operate.css"/>
 	<script type="text/javascript" src="static/js/jquery-1.11.1.min.js"></script>
 	<script type="text/javascript" src="static/js/echarts.min.js"></script>
 	<script type="text/javascript" src="static/js/dateUtil.js"></script>
	<script type="text/javascript">
		document.write("<script type='text/javascript' src='static/js/fullload.js?random="+Math.random()+"'></s"+"cript>");
	</script>
	<link rel="stylesheet" href="static/css/vue/index.css">
 <style type="text/css">
    	.tab{
    		height: 2rem;
    		width: 100%;

    	}
    	.tab_title {
    		display: flex;
    		justify-content: space-between;
    	}
    	.tab_title p{
    		width: 50%;
    		height: 0.8rem;

    		text-align: center;
    		line-height: 0.8rem;
    		font-size: 0.36rem;
    		color: white;
    		cursor: pointer;
    	}
    	.mmss{
    		height: 0.8rem;
    		width: 5rem;
    		text-align: center;
    		margin: auto;
    		
    	}
    	.mmss .el-date-editor{
    		width: 3rem;
    		height: 0.8rem;
    	} 
    	.hhmm{
    		height: 0.8rem;
    		width: 5rem;
    		text-align: center;
    		margin: auto;
    		
    	}
    	.hhmm .el-date-editor{
    		width: 3rem;
    	}
    	.el-input__inner{
    		height: 0.8rem;
    		text-align: center;
    	}
    	.show_one{
    		background-color:#035FAA;
    	}
    	.show_two{
    		background-color:silver;
    	}
			.el-button{
				position: relative;
				display: inline-block;
				z-index: 88;
			}
    	.el-input__icon{
    		display: none;
    	}
    	.iconAuto{
    		height: 0.8rem;
    		width: 0.2rem;
    		position: relative;
    		left: 0.1rem;
    	}
    	.el-date-editor .el-range-separator{
    		width: 31% !important;
    	}
    	.el-icon-caret-left{
    		  position: relative;
    		  left: -0.1rem;
    	}
    	#realRightButton{
    		height: 0.8rem;
    		width: 0.2rem;
    		position: relative;
    		left: -0.1rem;
    	}
    	.rightButton{
    		height: 0.8rem;
    		width: 0.2rem;
    		position: relative;
    		left: -0.1rem;
    	}
    	.el-button{
    		width: 0.42rem;
    		height: 0.8rem;
    		color: #8BC8FA;
    	}
		.top_btn .sec_top {
			justify-content: space-between;
			padding: 0 0.3rem;
		}
		.top_btn .sec_top .top_three #btn {
			box-shadow: 0px 3px 10px 1px rgba(4,4,4,0.32);
			padding: 0.1rem;
			border-radius: 4px;
		}
  .rightButton .el-icon-caret-right{
  	position: relative;
  	left: -0.1rem;
  }
  #realRightButton .el-icon-caret-right{
  	position: relative;
  	left: -0.1rem;
  }
    #data{
    	overflow-x: hidden;
    }
    body{
    	overflow-x: hidden;
    }
    .auto{
    	width: 100%;
    	margin: auto;
    }
    .el-date-editor .el-range-separator{
    	line-height: 0.7rem;
    }
    input[start-placeholder="begin"]{
    	margin-left: 0.2rem;
    }
  .mmss   .el-icon-time +input{
  	margin-left: 0.2rem;
  }
  .el-picker-panel{
       z-index: 2003;
    position: absolute;
    top: 388px;
    left: 28px !important;
  }
    </style>
    <script>
        + function() {
            remLayout();
 
            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
    </script>
</head>
 
 
<body>
	<div id="data">
		
	
    <header>
    	<img src="static/img/header_manzai.png" width="100%"/>
    	<div class="headers">
    		<div class="text_right">
    			<span>线路满载率统计</span>
    		</div>
    		<div class="text_left">
    			<span>统计截止日期</span>
    			<p id="statisticDate"></p>
    		</div>
    		<p class="Subheading"></p>
    	</div>
    </header>
    <section  style="margin-top: 0.2rem;">
    	<ul class="ul">
			<li class="top_btn">
				<div class="sec_top">
					<div class="top_one" >
<!--						<span id="aa">0</span>-->
<!--						<a>查看实时车厢满载率</a>-->
					</div>
					<div class="top_three" style="text-align: right;">
						<span id="btn" style="font-size: 0.28rem;"><a href="http://dtkl.shmetro.com:9091/html/index.html">查看实时车厢满载率</a></span>
						<p style="font-size: 0.14rem;margin-top: 10px;">展示各线路下不同站台的车厢满载率</p>
					</div>
				</div>
			</li>
    		<li class="li">
	    			<div class="sec_top">
	    				<div class="top_one" style="text-align: center;">
	    					<span id="lineCount">0</span>
	    					<p>线路数量</p>
	    				</div>
	    				<div class="top_three" style="text-align: center;">
	    					<span id="largeHundred">0</span>
	    					<p>区间满载率大于100%数量</p>
	    				</div>
	    			</div>
	    			<div class="sec_top">
	    				<div class="top_two" style="text-align: center;">
	    					<span id="sectionCount">0</span>
	    					<p>区间数量</p>
	    				</div>
	    				<div class="top_four" style="text-align: center;">
	    					<span id="largeFifty">0</span>
	    					<p>区间满载率大于50%数量</p>
	    				</div>
	    			</div>
	    			<div class="sec_two_header">
    					<img src="static/img/ico.png"/>
    					<span>重点线路满载率变化趋势（TOP5）</span>
    				</div>
    				<div class="sec_x" style="margin-top: -0.1rem;"></div>
    				<div class="tab" style="margin-top: -0.1rem;">
    						<div class="tab_title">
    							<p class="show_one" onclick="showone();">实时</p>
    							<p class="show_two" onclick="showtwo();">历史</p>
    						</div>
    						<div class="auto">
    							<div class="mmss fm">
	    							<el-button class="iconAuto" icon="el-icon-caret-left button_left" id="realLeftButton" @click="realLeftButtonClick()"></el-button>
	    							<el-time-picker
	    								:disabled=true
									    is-range
									    arrow-control
									    :clearable=false
									    v-model="startEndDateValue"
									    @change="realDateChange"
									    range-separator="至"
									    start-placeholder="begin"
									    end-placeholder="end"
									    placeholder="选择时间范围" value-format="HH:mm" format="HH:mm">
									  </el-time-picker>
									 <el-button icon="el-icon-caret-right button_right" id="realRightButton" @click="realRightButtonClick()"></el-button>
	    						</div>
    						</div>
    						<div class="auto">
    							<div class="hhmm xs" style="display: none;color:silver;">
	    							<el-button class="iconAuto" icon="el-icon-caret-left" @click="trendLeftButtonClick()"></el-button>
	    							<el-date-picker
	    							  :clearable=false
	    							  :editable=false
								      v-model="trendDateValue"
								      @change="trendDateChange"
								      :picker-options="pickerOptions"
								      type="date"
								      placeholder="">
								    </el-date-picker>
								   <el-button class="rightButton" icon="el-icon-caret-right"  id="trendRightButton" @click="trendRightButtonClick()"></el-button>
    						</div>
    						</div>
    						
    					</div>
    				<div class="sec_out" id="mains_one" style="height: 6rem !important;position: relative;top: -0.2rem;margin-top: 0.2rem;"></div>
    		</li>
    		<li>
    			<div class="sec_two" style="height: 6.8rem!important;">
    				<div class="sec_two_header">
    					<img src="static/img/ico.png"/>
    					<span>区间满载率排名（TOP5）</span>
    				</div>
    				<div class="sec_x" style="margin-top: -0.1rem;"></div>
    				<div class="sec_out" id="sectionRank" style="height: 6rem !important;position: relative;top: 0.4rem;"></div>
    			</div>
    		</li>
    		<li>
    			<div class="sec_twos">
    				<div class="sec_two_header">
    					<img src="static/img/ico.png"/>
    					<span>线路客流实时满载率</span>
    				</div>
    				<div class="sec_x" style="margin-top: -0.1rem!important;"></div>
    				<div class="sec_out table-responsive" id="sec_three" style="overflow: auto;">
    					<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th style='text-align: center; font-size: 0.28rem;'>线路</th>
									<th style='text-align: center; font-size: 0.28rem;'>时间段</th>
									<th style='text-align: center; font-size: 0.28rem;'>平均满载率</th>
									<th style='text-align: center; font-size: 0.28rem;'>操作</th>
								</tr>
							</thead>
						   <tbody style='text-align: center; font-size: 0.28rem;' id="realTimeFullLoad">
							</tbody>
						 </table>
    				</div>
    			</div>
    		</li>
    		<li>
    			<div class="sec_twos">
    				<div class="sec_two_header">
    					<img src="static/img/ico.png"/>
    					<span>早晚高峰满载率最高线路(TOP5)</span>
    				</div>
    				<div class="sec_x" style="margin-top: -0.1rem!important;"></div>
    				<div class="tab" style="height: 1rem;margin-top: -0.1rem;">
    						<div class="auto">
    							<div class="hhmm" style="color:silver;">
	    							<el-button class="iconAuto" icon="el-icon-caret-left" @click="lineLeftButtonClick()" id="lineLeftButton"></el-button>
	    							<el-date-picker
	    							  :clearable=false
	    							  :editable=false
								      v-model="lineDateValue"
								      @change="lineDateChange"
								      :picker-options="pickerOptions"
								      type="date"
								      placeholder="">
								    </el-date-picker>
								   <el-button class="rightButton" icon="el-icon-caret-right" @click="lineRightButtonClick()" id="lineRightButton"></el-button>
    							</div>
    						</div>
    						
    					</div>
    				<div class="sec_out table-responsive" id="sec_three" style="overflow: auto;margin-top: 0.1rem;">
    					
    					<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th style='text-align: center; font-size: 0.28rem;'>线路</th>
									<th style='text-align: center; font-size: 0.28rem;'>平均满载率</th>
								</tr>
							</thead>
						   <tbody style='text-align: center; font-size: 0.28rem;' id="peakFullload">
							</tbody>
						 </table>
    				</div>
    			</div>
    		</li>
    		<li>
    			<div class="sec_twos">
    				<div class="sec_two_header">
    					<img src="static/img/ico.png"/>
    					<span>早晚高峰满载率最高区间(TOP5)</span>
    				</div>
    				<div class="sec_x" style="margin-top: -0.1rem!important;"></div>
    				<div class="tab" style="height: 1rem;margin-top: -0.1rem;">
    						<div class="auto">
    							<div class="hhmm" style="color:silver;">
	    							<el-button class="iconAuto" icon="el-icon-caret-left"  @click="sectionLeftButtonClick()" id="sectionLeftButton"></el-button>
	    							<el-date-picker
	    							  :clearable=false
	    							  :editable=false
								      v-model="sectionDateValue"
								      @change="sectionDateChange"
								      :picker-options="pickerOptions"
								      type="date"
								      placeholder="">
								    </el-date-picker>
								   <el-button class="rightButton" icon="el-icon-caret-right"  @click="sectionRightButtonClick()"  id="sectionRightButton"></el-button>
    							</div>
    						</div>
    					</div>
    				<div class="sec_out table-responsive" id="sec_three" style="overflow: auto;margin-top: 0.1rem;">
    					<table class="table table-striped table-bordered">
							<thead>
								<tr>
									<th style='text-align: center; font-size: 0.28rem;'>线路</th>
									<th style='text-align: center; font-size: 0.28rem;'>区间名称</th>
									<th style='text-align: center; font-size: 0.28rem;'>时间段</th>
									<th style='text-align: center; font-size: 0.28rem;'>满载率</th>
								</tr>
							</thead>
						   <tbody style='text-align: center;  font-size: 0.28rem;' id="topFullloadSection">
							</tbody>
						 </table>
    				</div>
    			</div>
    		</li>
    	</ul>
    </section>
    <footer>
    </footer>
    </div>
     <!-- import Vue before Element -->
  <script src="static/js/vue/vue.js"></script>
  <!-- import JavaScript -->
  <script src="static/js/vue/index.js"></script>
	<script>
    new Vue({
		el: '#data',
		data: function() {
			var day = new Date();
			day.setTime(day.getTime()-24*60*60*1000);
			//如果是最近一天，右侧按钮不能点击
			if(day>new Date(new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000)){
				
				$("#realRightButton").attr("disabled","disabled");
				$("#realRightButton").css("color","grey");
				//说明初次加载，右侧按钮不能点击
				$("#trendRightButton").attr("disabled","disabled");
				$("#trendRightButton").css("color","grey");
				
				$("#lineRightButton").attr("disabled","disabled");
				$("#lineRightButton").css("color","grey");
				
				$("#sectionRightButton").attr("disabled","disabled");
				$("#sectionRightButton").css("color","grey");
				
				
				//获取当前时间
				var timeSectionEndDate = new Date();
				var m = timeSectionEndDate.getMinutes();
				m = Math.floor(m/5)*5;
				timeSectionEndDate.setMinutes(m);
				timeSectionEndDate.setSeconds(0);
				var startLongTime = timeSectionEndDate.getTime()-1000*60*55;
				
			}
			return {
				pickerOptions: {
					disabledDate: (time) => {
						//限制查询时间不能大于昨天
						return time>day;
				       }
				},
				maxEndDate :timeSectionEndDate,
				lineDateValue: day,sectionDateValue: day,trendDateValue:day,startEndDateValue: [new Date(startLongTime), timeSectionEndDate] 
			}
		},
		computed:{
        },
		watch:{
	  	},
	  	mounted(){
	  		window.trendDateChange = this.trendDateChange; // 方法赋值给window调用
  		},
		methods: {
			realLeftButtonClick(){
				this.startEndDateValue = [new Date(this.startEndDateValue[0].getTime()-1000*60*60),new Date(this.startEndDateValue[1].getTime()-1000*60*60)];
				this.realDateChange();
			},
			realRightButtonClick(){
				//时间控件减少一天
				this.startEndDateValue = [new Date(this.startEndDateValue[0].getTime()+1000*60*60),new Date(this.startEndDateValue[1].getTime()+1000*60*60)];
				this.realDateChange();
			},
			trendLeftButtonClick(){
				//时间控件减少一天
				this.trendDateValue = new Date((this.trendDateValue.getTime()-24*60*60*1000));
				this.trendDateChange();
			},
			lineLeftButtonClick(){
				//时间控件减少一天
				this.lineDateValue = new Date((this.lineDateValue.getTime()-24*60*60*1000));
				this.lineDateChange();
			},
			sectionLeftButtonClick(){
				//时间控件减少一天
				this.sectionDateValue = new Date((this.sectionDateValue.getTime()-24*60*60*1000));
				this.sectionDateChange();
				
			},
			trendRightButtonClick(){
				//时间控件减少一天
				this.trendDateValue = new Date((this.trendDateValue.getTime()+24*60*60*1000));
				this.trendDateChange();
				
			},
			lineRightButtonClick(){
				//时间控件减少一天
				this.lineDateValue = new Date((this.lineDateValue.getTime()+24*60*60*1000));
				this.lineDateChange();
				
			},
			sectionRightButtonClick(){
				//时间控件减少一天
				this.sectionDateValue = new Date((this.sectionDateValue.getTime()+24*60*60*1000));
				this.sectionDateChange();
				
				
			},
			realDateChange(){
				//右侧按钮
        		if(this.startEndDateValue[1] >= this.maxEndDate){
					$("#realRightButton").attr("disabled","disabled");
					$("#realRightButton").css("color","grey");
					$("#realRightButton").addClass("is-disabled");
				}else{
					$("#realRightButton").attr("disabled",false);
					$("#realRightButton").css("color","#8BC8FA");
					$("#realRightButton").removeClass("is-disabled");
				}
        		
        		//当日5点判断
        		//左侧按钮
        		if(this.startEndDateValue[0] <= new Date(new Date(new Date().toLocaleDateString()).getTime()+5*60*60*1000)){
					$("#realLeftButton").attr("disabled","disabled");
					$("#realLeftButton").css("color","grey");
					$("#realLeftButton").addClass("is-disabled");
				}else{
					$("#realLeftButton").attr("disabled",false);
					$("#realLeftButton").css("color","#8BC8FA");
					$("#realLeftButton").removeClass("is-disabled");
				}
        		
        		var bgStr="";
        		$.ajax({
        	        type: "post",
        	        url: "fullload/fullLoadTrend",
        	        dataType: "json",
        	        data :{conditionStartDate : this.startEndDateValue[0].format("yyyy-MM-dd hh:mm:ss"),conditionEndDate :this.startEndDateValue[1].format("yyyy-MM-dd hh:mm:ss")},
        	        success: function (data) {
        	        	drawTrendChart(data);
        	    	}
        	    });
        	},
			trendDateChange(){
        		if(this.trendDateValue>=new Date(new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000)){
					$("#trendRightButton").attr("disabled","disabled");
					$("#trendRightButton").css("color","grey");
					$("#trendRightButton").addClass("is-disabled");
				}else{
					$("#trendRightButton").attr("disabled",false);
					$("#trendRightButton").css("color","#8BC8FA");
					$("#trendRightButton").removeClass("is-disabled");
				}
        		var conditionDateStr = this.trendDateValue.format("yyyy-MM-dd");
        		var bgStr="";
        		$.ajax({
        	        type: "post",
        	        url: "fullload/fullLoadTrendHis",
        	        dataType: "json",
        	        data :{conditionDate:conditionDateStr},
        	        success: function (data) {
        	        	drawTrendChart(data);
        	    	}
        	    });
        	},
        	lineDateChange() {
				if(this.lineDateValue>=new Date(new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000)){
					$("#lineRightButton").attr("disabled","disabled");
					$("#lineRightButton").css("color","grey");
					$("#lineRightButton").addClass("is-disabled");
				}else{
					$("#lineRightButton").attr("disabled",false);
					$("#lineRightButton").css("color","#8BC8FA");
					$("#lineRightButton").removeClass("is-disabled");
				}
				
        		var conditionDateStr = this.lineDateValue.format("yyyy-MM-dd");
        		var bgStr="";
        		
	        	$.ajax({
	                type: "post",
	                url: "fullload/loadPeakFullload",
	                dataType: "json",
	                data :{conditionDate:conditionDateStr},
	                success: function (data) {
	                	$("#peakFullload").html("");
	                	if(data.length>0){
	                		for(var i in data){
	                    		bgStr+="<tr><td>"+data[i].lineName+"</td>";
	                    		bgStr+="<td>"+(data[i].avgSaturation)+"%</td></tr>";
	            			}
	            			$("#peakFullload").html(bgStr);
	                	}
	                	
	            	}
	            });
        	},
        	sectionDateChange(){
        		if(this.sectionDateValue>=new Date(new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000)){
					$("#sectionRightButton").attr("disabled","disabled");
					$("#sectionRightButton").css("color","grey");
					$("#sectionRightButton").addClass("is-disabled");
				}else{
					$("#sectionRightButton").attr("disabled",false);
					$("#sectionRightButton").css("color","#8BC8FA");
					$("#sectionRightButton").removeClass("is-disabled");
				}
        		
        		var conditionDateStr = this.sectionDateValue.format("yyyy-MM-dd");
        		var bgStr="";
        		
        	    $.ajax({
        	        type: "post",
        	        url: "fullload/loadTopFullloadSection",
        	        dataType: "json",
        	        data :{conditionDate:conditionDateStr},
        	        success: function (data) {
        	        	$("#topFullloadSection").html("");
        	        	if(data.length>0){
        		        	for(var i in data){
        		        		bgStr+="<tr><td style='vertical-align:middle;'>"+data[i].lineName+"</td>";
        		        		bgStr+="<td style='vertical-align:middle;'>"+data[i].sectionName.replace("==>", "<br/>")+"</td>";
        		        		bgStr+="<td style='vertical-align:middle;'>"+data[i].timeSection+"</td>";
        		        		bgStr+="<td style='vertical-align:middle;'>"+(data[i].saturation)+"%</td></tr>";
        					}
        					$("#topFullloadSection").html(bgStr);
        	        	}
        	    	}
        	    });
        	}
        	
       	}
	});
</script>
<script type="text/javascript">
	function showone(){
	 	$('.xs').css('display','none');
	 	$('.fm').css('display','block');
	 	$('.show_one').css('background-color','#035FAA');
	 	$('.show_two').css('background-color','silver');
	 	fullLoadTrend();
	 }
	function showtwo(){
		$('.xs').css('display','block');
	 	$('.fm').css('display','none');
	 	$('.show_one').css('background-color','silver');
	 	$('.show_two').css('background-color','#035FAA');
	 	//查看历史重点线路变化趋势
	 	trendDateChange();
	}
		window.onpageshow = function (event) {
		      if (event.persisted) {
		        window.location.reload()
		      }
		    }
	</script>
</body>
</html>